<template>
  <!-- 模拟器 -->
  <div class="vue-simulator" ref="simulatorPage">
    <div style="height: 100%;" class="seeCan" ref="pageBox">
      <!-- banner -->
      <div class="banner computedHeight">
        <!--  http://qpic.y.qq.com/music_cover/mlUG84rgKKtFPWMCEuzxuyXLOUEOwk3VxT9WFAuNRUoF8PRAicWu77g/300?n=1-->
        <el-image
          class="banner-img"
          :src="baseInfoData[4].val"
          fit="cover"
          @mousedown="mousedown"
        ></el-image>
      </div>
      <!-- 头部info -->
      <div class="tit computedHeight">
        <!-- <span class="tit-text" v-text="baseInfoData[0].val?baseInfoData[0].val:'待输入...'"></span> -->
        <div class="rowone">
          <div class="tit-author">{{baseInfoData[0].val?baseInfoData[0].val:'待输入...'}}</div>
          <div class="tit-ic-group">
            <el-image src="/static/img/ic-group.png" @mousedown="mousedown"></el-image>
          </div>
        </div>
        <div class="rowtwo" v-show="baseInfoData[5].val.length>0?true:false">
          <span class="tag-item" v-for="(tag, index) in baseInfoData[5].val" :key="index">{{tag}}</span>
        </div>
        <div class="rowthree">
          <div class="rth-left">
            <el-image src="static/img/position.png" class="tit-rt-posic" @mousedown="mousedown"></el-image>
            <span v-text="baseInfoData[8].val?baseInfoData[8].val:'待输入'" class="rth-text"></span>
          </div>
          <el-image src="/static/img/skip.png" class="tit-rt-skipic" @mousedown="mousedown"></el-image>
        </div>
      </div>
      <!-- <div
        class="summary computedHeight"
        v-show="baseInfoData[2].val?true:false"
        v-html="replaceN(baseInfoData[2].val)"
      ></div> -->
      <!-- 语音播放 -->
      <div class="audio computedHeight" v-show="baseInfoData[9].val?true:false" @click="audioPlay">
        <div class="audio-info">
          <div class="audio-info-tit">特色语音解说</div>
          <div class="audio-info-content">{{baseInfoData[9].val.title}}</div>
          <audio ref="audio" id="lAudio" :src="baseInfoData[9].val.file_url" @ended="ended"></audio>
        </div>
        <el-image src='/static/img/playMusic.png' class="audio-img" v-show="!playMusic" @mousedown="mousedown"></el-image>
        <el-image src='/static/img/playMove.png' :class="`audio-img ${playMusic?'move':'stop'}`" v-show="playMusic" @mousedown="mousedown"></el-image>
      </div>
      <!-- 门票 -->
      <div class="ticket computedHeight">
        <div class="ticket-tit">
          购买门票(关联门票)
        </div>
        <div class="ticketBox">
          <div v-show="baseInfoData[14].val.length>0" class="ticket-content" v-for="(ticketItem, index) in baseInfoData[14].val" :key="index">
            <el-image :src="ticketItem.thumb" @mousedown="mousedown" class="ticket-img" fit="cover"></el-image>
            <div class="ticket-info">
              <span class="info-tit">{{ticketItem.title}}</span>
              <div class="info-price">
                <span class="price-ic" style="font-size: 11px;">¥</span>
                <span class="price-num" style="font-size: 17px;">{{Math.floor(Math.random() * (1000 - 200 + 1)) + 200}}</span>
                <span class="price-text" style="font-size: 11px;">起</span>
              </div>
            </div>
          </div>
          <div v-show="!baseInfoData[14].val.length>0" style="font-size: 14px;">待选择...</div>
        </div>
      </div>
      <!-- day -->
      <div class="day-box computedHeight" v-show="point.length>0?true:false">
        <!-- day content -->
        <div class="day-content" v-show="point.length>0?true:false">
          <div class="day-content-scrollY">
            <div class="day-every-box">
              <!-- <unit :unit="point" ref="unit" @img-load="imgLoad" name="strategy"></unit> -->
              <!-- <div class="u-summary" v-text="pointItem.summary?dayItem.summary:'待输入'">{{dayItem.summary}}</div> -->
              <div class="scenicInfo-tit">景点信息</div>
              <div
                class="p-tibox"
                v-for="(contentItem, contentIndex) in point"
                :key="contentIndex"
              >
                <div class="pt-text" v-if="contentItem.type === 'text'">
                  <span v-html="replaceN(contentItem.val)"></span>
                </div>
                <div class="pt-img" v-else>
                  <el-image
                    :src="contentItem.imgList.url"
                    @load="load"
                    lazy
                    @mousedown="mousedown"
                    fit="cover"
                    class="pt-el-img"
                  ></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // tit的上下margin
      titMargin: 40,
      // 特点的下margin
      featrueMargin: 20,
      // day margin-bottom
      dayMarginBottom: 20,
      playMusic: false
    };
  },
  props: {
    point: {
      type: Array,
      default: () => {
        return [];
      }
    },
    baseInfoData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    baseInfoData: {
      handler(now, old) {
        this.initPageScroll();
      },
      deep: true
    },
    point: {
      handler(now, old) {
        console.log('gx')
        this.initPageScroll();
      },
      deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.initPageScroll();
      // this.initTitTabScroll();
    });
  },
  components: {
    // unit: httpVueLoader("./unit.vue")
  },
  methods: {
    ended(){
      this.playMusic = false
      const audio = this.$refs.audio
      audio.pause()
    },
    audioPlay(){
      this.playMusic = !this.playMusic
      const audio = this.$refs.audio
      if(this.playMusic){
        audio.play()
      }else{
        audio.pause()
      }
    },
    load(){
      this.initPageScroll()
    },
    getYearM() {
      var a = new Date();
      var y = a.getFullYear();
      var m = (a.getMonth() + 1).toString();
      var d = a.getDate().toString();
      return (
        y +
        "/" +
        (m.length == 1 ? `0${m}` : m) +
        "/" +
        (d.length == 1 ? `0${d}` : d)
      );
    },
    replaceN(str) {
      if (str) {
        return str.replace(/\n/g, "<br>");
      }
    },
    mousedown(e) {
      e.preventDefault();
    },
    imgLoad() {
      this.initPageScroll();
    },
    initTitTabScroll() {
      // 这里计算滑动div的width
      let width = this.point.length * (60 + 15);
      this.$refs.titTabScroll.style.width = width + "px";
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.titTab, {
            startX: 0,
            click: true,
            scrollY: false,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    getPageHeight() {
      let pageItems = this.$refs.simulatorPage.getElementsByClassName(
        "computedHeight"
      );
      let height = 0;
      for (var i = 0; i < pageItems.length; i++) {
        height += pageItems[i].clientHeight;
      }
      return Number(height);
    },
    initPageScroll() {
      const { titMargin, featrueMargin, dayMarginBottom } = this;
      this.$nextTick(() => {
        this.$refs.pageBox.style.height =
        this.getPageHeight() +
        titMargin +
        featrueMargin +
        dayMarginBottom +
        "px";
        this.simulatorPages = new BScroll(this.$refs.simulatorPage, {
          startX: 0,
          click: true,
          scrollY: true,
          scrollX: false,
          eventPassthrough: "horizontal",
          deceleration: 0.001
        });
      });
    }
  }
};
</script>
<style scoped>
@import "./simulator.css";
.tit {
  flex-direction: column;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}
.rowone {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.rowtwo {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  font-size: 14px;
  margin: 5px 0 10px;
}
.tag-item{
  color: #1abc9c;
  padding: 2px 6px;
  border:1px solid #1abc9c;
  border-radius: 15px;
  font-size: 12px;
  margin-right: 5px;
}
.rowthree {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rth-left {
  display: flex;
  justify-content: flex-start;
  flex: 9;
}
.tit-author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 8;
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
}
.tit-rt-posic {
  width: 12px;
  height: 16px;
}
.rth-text {
  font-size: 14px;
  color: #353535;
  margin-left: 8px;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tit-rt-skipic {
  width: 5px;
  height: 8px;
  /* flex: 1; */
}
/* 景点info */
.scenicInfo-tit{
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
}
.pt-text{
  font-size: 14px;
  color: #353535;
  word-break: break-all; 
  text-align: justify;
}
.p-tibox{
  margin: 5px 0;
}
.pt-img{
  margin: 5px 0;
}
.pt-el-img{
  border-radius: 4px;
}



.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
.author-name {
  font-size: 14px;
  font-weight: bold;
  color: #353535;
}
.author-time {
  font-size: 12px;
  color: #8a8a8a;
}
.summary {
  width: 95%;
  margin: 0 auto;
  font-size: 14px;
  color: #353535;
  word-break: break-all;
  text-align: justify;
}
/* 语音 */
.audio{
  width: 95%;
  margin: 0 auto;
  background-color: #ffffff;
  /* background: rgba(230,162,60,0.1); */
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  box-sizing: border-box;
}
.audio-info-tit{
  font-size: 15px;
  color: #353535;
  font-weight: bold;
}
.audio-info-content{
  color: #8a8a8a;
  font-size: 11px;
  margin-top: 5px;
}
.audio-img{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.move {
  animation: rotate 30s linear infinite;
  animation-fill-mode: forwards;
}
.stop {
  animation-play-state: paused;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 门票 */
.ticket{
  width: 95%;
  margin: 0 auto;
}
.ticket-tit{
  padding: 20px 0 10px;
  font-size: 18px;
  color: #353535;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
}
.ticketBox{
  width: 100%;
}
.ticket-content{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 10px 0;
}
.ticket-img{
  width: 94px;
  height: 74px;
  border-radius: 5px;
  margin-right: 10px;
}
.ticket-info .info-tit{
  font-size: 14px;
  color: #353535;
}
.ticket-info .info-price{
  margin-top: 20px;
  color: #1abc9c;
  display: flex;
  align-items: center;
}
</style>